<script setup>
import request from '@/utils/request'
import {ref,onMounted,watch} from 'vue'
const tableData = ref([])
const total = ref(0)
onMounted(() => {
    select()
})

const currentPage = ref(1)
const pageSize = ref(5)

const handleSizeChange = (val) => {
    pageSize.value = val

}
const handleCurrentChange = (val) => {
    currentPage.value = val
}
watch([currentPage, pageSize], () => {
    select()
})

const form = ref({
    username: '',
    id: ''
})

const select = async () => {
    const res = await request.get('/userInfo', {
        params: {
            username: form.value.username,
            id: form.value.id,
            page: currentPage.value,
            pageSize: pageSize.value
        }
    })
    console.log(res)
    tableData.value = res.data.data.record
    total.value = res.data.data.total
}

const reset = () => {
    form.value.username = ''
    form.value.id = ''
    currentPage.value = 1
    select()
}
</script>
<template>
   <h1 class="title">->用户管理</h1>
    <el-form :model="form" :inline="true" class="form">
        <el-form-item label="书名:">
            <el-input v-model="form.id" placeholder="请输入查找用户id" />
        </el-form-item>
        <el-form-item label="类型:">
            <el-input v-model="form.username" placeholder="请输入查找用户名" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="select">查找</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
        <!-- <el-form-item>
            <el-button type="success" circle :icon="Plus" @click="add"></el-button>
        </el-form-item> -->
    </el-form>
    <el-table :data="tableData" class="table">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="username" label="用户名" width="300" />
        <!-- <el-table-column prop="image" label="图片">
            <template #default="{ row }">
                <img :src="row.image" alt="" style="width: 80px;height: 90px">
            </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="price" label="价格">
            <template #default="{ row }">
                &yen;{{ row.price.toFixed(2) }}
            </template>
        </el-table-column> -->
        <!-- <el-table-column label="编辑">
            <template #default="{ row }">
                <el-button type="primary" circle :icon="EditPen" @click="editbook(row.id)"></el-button>
                <el-button type="danger" circle :icon="Delete" @click="deletebook(row.id)"></el-button>
            </template>
        </el-table-column> -->
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" class="page">
    </el-pagination>
</template>
<style scoped lang="scss">
.title{
     margin-left: 8px;
}
.form {
    margin-top: 38px;
}

.table {
    width: 100%;
}

.page {
    margin-top: 18px;
    float: right;
    margin-right: 38px;
}
</style>